<template>
	<div id="shopingComment">
		<div class="shoping-header">
			<img src="../images/ic_shopdetail_back.png" alt="" class="fl">
			<div class="shoping-header-list fl">
				全部评论
			</div>
			<div class="shoping-header-share fr">
				<img src="../images/ic_shopdetail_share.png" alt="">
			</div>
			<div class="shoping-header-more fr">
				<img src="../images/ic_shopdetail_more.png" alt="">
			</div>
			<div class="clear"></div>
		</div>
		<div class="comment-titleBox">
			<div class="comment-classlist fl">
				<div class="comment-classitem active">
					全部<span>{{all_comment_count}}</span>
				</div>
				<div class="comment-classitem">
					好评<span>{{good_comment_count}}</span>
				</div>
				<div class="comment-classitem">
					好评<span>1000</span>
				</div>
				<div class="comment-classitem">
					好评<span>1000</span>
				</div>
				<div class="comment-classitem">
					好评<span>1000</span>
				</div>
				<div class="comment-classitem">
					好评<span>1000</span>
				</div>
			</div>
			<div class="comment-classNum fr">
				<p>{{good_comment_increase}}%</p>
				<span>好评度</span>
			</div>
			
			<div class="clear"></div>
		</div>
		<!-- //评论列表 -->
		<div class="comment-list"> 
			<div class="comment-item" v-for="(item,index) in comment_list">
				<div class="comment-item-title">
					<img :src="'los'+item.member.member_thumb" alt="" class="fl">
					<div class="comment-item-userCont fl">
						<div class="comment-item-userBox">
							<p class="fl">{{item.member.member_nickname}}</p>
							<img src="../images/ic_my_buyer_v2.png" alt="" class="fl">
							<div class="clear"></div>
						</div>
						<div class="comment-item-specifications">
							{{item.goods.goods_name}} +
							<span v-for="(item3,index3) in item.sku.sku_spec">{{item3.sv_name}}</span>
						</div>
					</div>
					<ul class="comment-num fr">
						<li class="comment-num-item fl" :class="{active:(index2+1)<=item.comment_score}" v-for="(item2,index2) in 5"></li>
						<li class="clear"></li>
					</ul>
					<div class="clear"></div>
				</div>
				<div class="comment-item-textBox fr">
					<div class="comment-item-deriction">
						{{item.comment_info}}
					</div>
					<ul class="comment-item-imgList" v-if="item.comment_imgs">
						<li v-for="(item4,index4) in item.comment_imgs">
							<img :src="item4" alt="">
						</li>
						<div class="clear"></div>
					</ul>
				</div>

				<div class="comment-item-list fr">
					<div class="comment-item-time fl">{{item.add_time}}</div>
					<div class="comment-item-like fr">12</div>
					<div class="comment-item-comment fr">6</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</div>
</template>
<script>
	
	import $ from 'jquery'
	import axios from 'axios'
	import BScroll from 'better-scroll';
	import CountDown from 'vue2-countdown'
	import { XHeader, Loading, Toast ,Swiper,
		SwiperItem,} from 'vux'
	export default {
		data() {
			return {
				banner_list: [],
				goHomeButton:true,
				money:170.00,
				paymoney:170.00,
				num:1,
				goods:'',
				mall_goods:'',
				commodity_id:'',
				comment_list:'',
				comment_tags:'',
				good_comment_increase:'100',
				all_comment_count:'0',
				good_comment_count:'0'
			}
		},
		components:{
			Loading,
			Toast,
			Swiper,
			SwiperItem,
		},
		watch: {
			'$route': function(to, from) {
				// this.getGoodsDetail();
				window.parent.scrollTo(0, 0);
			}
		},
		beforeRouteEnter(to, from, next) {
			next(vm => {
				vm.fullName = from.name;
			})
		},
	
		mounted() {
			this.getId();
			this.getCommentList();
		},
		methods: {
			//获取路由参数
			getId:function(){
				this.commodity_id = this.$route.params.id;
			},
			getCommentList:function(){
				this.$http({
					method:'GET',
					url:'/los/api/mall/comment_list.json?commodity_id='+this.commodity_id,
					data:''
				}).then((res)=>{
					//console.log(res);
					if(res.data.code == 1){
						this.comment_list = res.data.data.mall_comment;
						this.all_comment_count=res.data.data.all_comment_count,
						this.good_comment_count=res.data.data.good_comment_count,
						this.good_comment_increase = parseFloat((res.data.data.good_comment_count / res.data.data.all_comment_count) * 100).toFixed(2);
					}
				}).catch((err)=>{
					console.log(err);
				})
			}
		}
	}

	
</script>

<style scoped>
		.comment-titleBox{
		padding: 0.36rem 0.4rem;
		/*padding-left: 0;*/
		background-color: #fff;
		box-sizing:border-box;
		padding-bottom: 0.16rem;
		border-top: solid 1px #f6f6f6;
	}
	.comment-titleBox .comment-classlist{
		width: 7.466667rem;
	}
	.comment-titleBox .comment-classitem{
		display: inline-block;
		width: 2.053333rem;
		line-height: 0.64rem;
		border-radius: 0.32rem;
		background-color: #FFF3F4;
		margin-right: 0.4rem;
		margin-bottom: 0.32rem;
		text-align: center;
		font-size: 0.32rem;
		float: left;
	}
	.comment-titleBox .comment-classitem:nth-of-type(3n){
		margin-right: 0;
	}
	.comment-titleBox .comment-classitem.active{
		background:linear-gradient(90deg,rgba(221,40,53,1) 0%,rgba(221,40,87,1) 100%);
		color: #fff;
	}
	.comment-titleBox .comment-classNum{
		width: 1.733333rem;
		height: 1.733333rem;
		border-radius: 100%;
		font-size: 0.32rem;
		color: #666;
		background-color: #F5F5F5;
		text-align: center;
	}
	.comment-titleBox .comment-classNum p{
		margin-top:0.493333rem;
		line-height: 0.293333rem;
		font-size: 0.373333rem;
		margin-bottom: 0.106667rem;
		font-size: 0.373333rem;
		color: #DD2835;
		font-weight: bold;
	}
	.shoping-header{
		height: 1.173333rem;
		line-height: 1.173333rem;
		background-color: #fff;
		color: #222;
		font-size: 0.4rem;
		width: 100%;
		z-index: 999;
		transform:all 1s;
		position: relative;
	}
	.shoping-header img{
		display: block;
		width: 0.88rem;
		height: 0.88rem;
		margin-top: 0.173333rem;
		margin-left: 0.4rem;
		margin-right: 1.733333rem;
	}
	.shoping-header-list{
		width: 4.8rem;
		position: absolute;
		left: 50%;
		top: 0;
		height: 100%;
		text-align: center;
		margin-left: -2.4rem;
	}
	.shoping-header-share{
		width: 0.88rem;
		height: 0.88rem;
		margin-top: 0.173333rem;
	}
	.shoping-header-share img{
		display: block;
		width: 100%;
		height: 100%;
		margin: 0;
	}
	.shoping-header-more {
		width: 0.88rem;
		height: 0.88rem;
		margin-top: 0.173333rem;
		margin-left: 0.213333rem;
	}
	.shoping-header-more img{
		display: block;
		width: 100%;
		height: 100%;
		margin: 0;
	}
	.comment-num{
	  margin-top: 0.266667rem;
	  color: #DD2835;
	  font-size: 0.293333rem;
	  line-height: 0.35rem;
	}
	.comment-num span{
	  display: inline-block;
	  margin-left: 0.133333rem;
	}
	.comment-num .comment-num-item{
	  display: inline-block;
	  width: 0.32rem;
	  height: 0.293333rem;
	  background: url('../images/xing2.png')center center;
	  background-size: 100% 100%;
	  margin-bottom: 0.2rem;
	  margin-right: 0.066667rem;
	}
	.comment-num .comment-num-item.active{
	  background: url('../images/xing.png')center center;
	  background-size: 100% 100%;
	}
	.comment-list{
		background-color: #fff;
		margin-top: 0.266667rem;
		padding: 0 0.4rem;
		box-sizing:border-box;
	}
	.comment-list .comment-item{
		padding: 0.4rem 0;
		border-bottom: solid 0.013333rem #E6E6E6;
	}
	.comment-list .comment-item .comment-item-title{
		height: 0.933333rem;
		font-size: 0.32rem;

	}
	.comment-list .comment-item .comment-item-title img{
		width: 0.88rem;
		height: 0.88rem;
		border-radius: 100%;
		margin-right: 0.226667rem;
	}
	.comment-list .comment-item .comment-item-title .comment-item-userCont{
		font-size: 0.373333rem;
		color: #222;
		line-height: 0.346667rem;
	}
	.comment-list .comment-item .comment-item-title .comment-item-userCont img{
		display: inline-block;
		width: 0.346667rem;
		height: 0.346667rem;
	}
	.comment-list .comment-item .comment-item-title .comment-item-specifications{
		font-size: 0.32rem;
		color: #999999;
		line-height: 0.32rem;
		margin-top: 0.226667rem;
	}
	.comment-item-textBox{
		width: 8.04rem;
		margin-top: 0.373333rem;
		font-size: 0.373333rem;
		color: #222222;
	}
	.comment-item-imgList li {
		width: 1.88rem;
		height: 1.88rem;
		margin-right: 0.173333rem;
		display: inline-block;
		margin-top: 0.266667rem;
	}
	.comment-item-imgList li img{
		width: 100%;
		height: 100%;
	}
	.comment-item-imgList li:nth-of-type(4n){
		margin-right: 0;
	}
	.comment-item-list{
		width: 8.04rem;
		font-size: 0.32rem;
		margin-top: 0.586667rem;
	}
	.comment-item-list .comment-item-like,.comment-item-list .comment-item-comment{
		padding: 0 0.533333rem;
		position: relative;
	}
	.comment-item-list .comment-item-like{
		padding-right: 0;
	}
	.comment-item-list .comment-item-like:before{
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 0.373333rem;
		height: 0.373333rem;
		background:url(../images/ic_forum_detail_praise.png)center center;
		background-size: 100% 100%;
	}
	.comment-item-list .comment-item-comment:before{
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 0.373333rem;
		height: 0.373333rem;
		background:url(../images/ic_forum_detail_comment.png)center center;
		background-size: 100% 100%;
	}
</style>